<script setup lang="ts">
import {computed, onMounted, useSlots} from "vue";
import {devDeepMerge} from "@/utils";
import {useConfig} from "@/installer";
import {ElInput} from 'element-plus'; // 引入 Element Plus 组件
import {devInputProps} from './input';

const slots = useSlots();
const props = defineProps(devInputProps); // 组件props
const emit = defineEmits(['update:modelValue'])

// 计算属性，处理 v-model 绑定
const inputValue = computed({
  get: () => props.modelValue,
  set: (value: string) => {
    if (props.disableChars?.length) {
      const regex = new RegExp(`[${props.disableChars.join('')}]`, 'g');
      value = value.replace(regex, '');
    }
    emit('update:modelValue', value);
  }
});

// 组件挂载时，清理初始值中的禁用字符
onMounted(() => {
  if (props.modelValue && props.disableChars?.length) {
    const regex = new RegExp(`[${props.disableChars.join('')}]`, 'g');
    emit('update:modelValue', props.modelValue.replace(regex, ''));
  }
});



// 定义组件名称
defineOptions({
  name: 'DevInput',
  inheritAttrs: false
});
</script>

<template>
  <el-input v-bind="devDeepMerge(useConfig().elInputProps, $attrs)" v-model="inputValue">
    <template v-for="(_, slotName) in slots" #[slotName]="scope">
      <slot :name="slotName" v-bind="scope" />
    </template>
  </el-input>
</template>

<style scoped lang="scss">

</style>
